<template>
    <div id="home" :style="homeBackGround">
      <router-view name="top"></router-view>
      <div :style="showMainBox">
        <router-view name="left"></router-view>
        <router-view name="homeMainModule"></router-view>
      </div>
    </div>
</template>

<script type="text/javascript">
export default {
  name: 'home',
  data () {
    return {
      homeBackGround: {
        fontSize: '14px',
        backgroundImage: 'url(' + require('@/assets/img/6.jpg') + ')',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        width: '100%',
        height: '100%'
      },
      showMainBox: {
        position: 'relative',
        top: '70px',
        width: '100%',
        height: '80%'
      }
    }
  }
}
</script>

<style>
      button:focus,input::-moz-focus-inner, button::-moz-focus-inner{
        outline: 0;
    }
    button:hover{
        background-color:#87CDF1;
    }
    button:active{
        background-color:#006699;
    }
    button{
        cursor:pointer !important;
        background-color:#3BA4EF;
        color:#FFFFFF;
        border-radius: 5px;
        border: none;
        outline: 0;
    }
</style>
